<template>
	<view class="content">
		<view class="change-box flexWrapNo" :style="{top:customHeight.top+'px',height:customHeight.height+'px'}" @tap="goPage('/pages/home/storeList')">
			切换门店
			<image src="../../static/home/change.png" class="change-icon"></image>
		</view>
		<view class="nav-box flexWrap" :style="{paddingTop:navHeight+'px'}">
			<view class="nav-item flexWarpCenterColumn" v-for="(item,index) in navList" :key="index" :class="{active:currmentIndex==index}" @tap="changeNav(index)">
				<text>{{item}}</text>
				<text class="line"></text>
			</view>
		</view>
		<view class="appointment-box">
			<view class="appointment-item" v-for="(item,index) in dataList" :key="index" @tap="goPage('/pages/appointment/appointmentDetails?id='+item.id)">
				<view class="top-box flexWrapNo">
					<view class="left-box flexWrapNo">
						<view class="head-box">
							<image :src="item.a_avatar" v-if="item.a_avatar"></image>
							<image src="../../static/appointment/person-icon.png" v-else></image>
						</view>
						<view class="name-lable">{{item.a_nickname||""}}</view>
					</view>
					<view class="vs-box flexWarpCenterColumn">
						<image src="../../static/appointment/vs-icon.png" class="vs-icon"></image>
						<view class="vs-status" :class="{green:item.appointment_status==10,blue:item.appointment_status>=25,grey:item.appointment_status==20}">
							<block v-if="item.appointment_status==1||item.appointment_status==0">待应约</block>
							<block v-if="item.appointment_status==10">已约成</block>
							<block v-if="item.appointment_status==15">爽约</block>
							<block v-if="item.appointment_status==20">未约成</block>
							<block v-if="item.appointment_status==25">开台中</block>
							<block v-if="item.appointment_status==30">确认比分</block>
							<block v-if="item.appointment_status==40">已完成</block>
							<block v-if="item.appointment_status==45">已取消</block>
						</view>
					</view>
					<view class="right-box flexWrapNo">
						<view class="name-lable">{{item.b_nickname||""}}</view>
						<view class="head-box">
							<image :src="item.b_avatar" v-if="item.b_avatar"></image>
							<image src="../../static/appointment/person-icon.png" v-else></image>
						</view>
					</view>
				</view>
				<view class="bottom-box">
					<view class="info-box flexWrap">
						<view class="info-left">
							<view class="shop-info-box flexWrapNo">
								<image src="../../static/appointment/addres-icon.png" class="address-icon"></image>
								<text style="flex: none;">{{item.shop_name}}</text>
								<text class="distance-lable">距我{{item.distance}}km</text>
							</view>
							<view class="time-box flexWrapNo">
								<image src="../../static/appointment/time-icon.png" class="time-icon"></image>
								{{item.selected_time}}
							</view>
						</view>
					</view>
					<view class="chat-box flexWrapNo">
						<image src="../../static/appointment/chat-icon.png" class="chat-icon"></image>
						<view class="chat-info">
							<view class="chat-text">{{item.leave_message}}</view>
							<view class="lable-box flexWrapNo">
								<view class="lable-item" v-for="(k,i) in item.label">{{k}}</view>
							</view>
						</view>
					</view>
					<block v-if="currmentIndex!=2">
						<view v-if="user_id==item.party_a" class="appointment-btn">查看</view>
						<block v-else>
							<view class="appointment-btn" v-if="(item.appointment_status==1||item.appointment_status==0)">我要应约</view>
						</block>
					</block>
					<view class="btn-box flexWrapNo" v-if="currmentIndex==2">
						<!-- 待应约 -->
						<block v-if="item.appointment_status==0||item.appointment_status==1">
							<view class="btn"  @tap.stop="cancelAppointment(index,item.id)">
								取消订单
							</view>
							<view class="btn solid flexWrapNo" v-if="item.appointment_status==1" @tap.stop="goPage('/pages/appointment/addAppoint?id='+item.id)">
								<image src="../../static/appointment/edit-icon.png" class="edit-icon"></image>
								修改
							</view>
							<view class="btn solid flexWrapNo" v-if="item.appointment_status==1">
								<image src="../../static/appointment/share-icon.png" class="share-icon"></image>
								分享
							</view>
						</block>
						<!-- 约成 -->
						<view class="btn solid flexWrapNo" v-if="item.appointment_status==10">
							<image src="../../static/appointment/share-icon.png" class="share-icon"></image>
							分享
						</view>
						<!-- 开台中/结束 -->
						<view class="btn" v-if="item.appointment_status==25||item.appointment_status==40||item.appointment_status==30||item.appointment_status==15" @tap.stop="goPage('/pages/appointment/score?id='+item.id)">比分</view>
						<view class="btn">查看</view>
					</view>
				</view>
			</view>
			<view class="empty-box flexWarpCenterColumn" v-if="dataList.length==0">
				<image src="/static/order/emptyBg.png" class="empty-image"></image>
				<view class="empty-tips">暂无数据</view>
			</view>
		</view>
		<view class="make-btn flexWarpCenterColumn" @tap="goPage('/pages/appointment/addAppoint')">
			<text>发起</text>
			<text>约球</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currmentIndex:0,
				navList:['本店约','同城约','我的约球'],
				longitude:"106.540541",
				latitude:"29.590991",
				dataList:[],
				customHeight:{
					height:30,
					top:20
				},
				navigationBarHeight:"",
				navHeight:"",
				iStatusBarHeight:"",
				user_id:""
			};
		},
		onPullDownRefresh: function() {
			this.getList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//胶囊高度
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			this.customHeight = wx.getMenuButtonBoundingClientRect()
			 // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = this.customHeight.height + (this.customHeight.top - this.iStatusBarHeight) * 2
			// 总体高度 = 状态栏高度 + 导航栏高度
			this.navHeight = this.navigationBarHeight + this.iStatusBarHeight
			//#endif
		},
		onShow() {
			if(uni.getStorageSync('currentIndex')){
				this.currmentIndex=uni.getStorageSync('currentIndex')
				console.log(this.currmentIndex)
				uni.removeStorageSync('currentIndex') // 清除登录token
			}
			this.getLocation();
		},
		methods:{
			changeNav(index){
				this.currmentIndex=index
				this.getList();
			},
			cancelAppointment(index,id){
				uni.showModal({
					title:'提示',
					content:"是否确认取消约球",
					success: (res) => {
						if(res.confirm){
							this.$request.post(this.$api.cancelAppointment, {
								id:id
							}, {
								token: true
							}).then(res => {
								let {
									data = {}
								} = res;
								if (res.code == 1) {
									this.$tools.showToast('操作成功')
									setTimeout(()=>{
										this.getList();
									},1000)
								}
							})
						}
					}
				})
			},
			// 获取经纬度
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						console.log(res)
						that.longitude=res.longitude
						that.latitude=res.latitude
						uni.setStorageSync('longitude',that.longitude)
						uni.setStorageSync('latitude',that.latitude)
						that.getList();
					},
					fail(res) {
						that.$tools.showToast('请打开GPS后下拉刷新')
					}
				});
			},
			getList(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$request.post(this.$api.appointmentList, {
					longitude: this.longitude,
					latitude:this.latitude,
					type:Number(this.currmentIndex+1),
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.dataList=data.store_about_list
						this.user_id=data.user_info.id
						uni.setStorageSync('user_id',this.user_id)
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 32upx;
	}
	.change-box{
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 233upx;
		background: rgba(0,0,0,0.06);
		border: 2px solid rgba(255,255,255,0.251);
		border-radius: 63upx;
		justify-content: center;
		position: fixed;
		z-index: 999;
		.change-icon{
			width: 36upx;
			height: 36upx;
			margin-left: 24upx;
		}
	}
	.nav-box{
		padding: 0 80upx;
		.nav-item{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #82819B;
			.line{
				display: inline-block;
				width: 94rpx;
				height: 4rpx;
				margin-top: 10rpx;
			}
		}
		.active{
			color: #fff;
			.line{
				background: #26BCFD;
			}
		}
	}
	.appointment-box{
		margin-top: 32upx;
		.appointment-item{
			margin-bottom: 20upx;
			.top-box{
				background: linear-gradient(141deg, #8D2639 0%, #121EAF 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 30upx 28upx 30upx 28upx;
				.left-box{
					.head-box{
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
						border: 2rpx solid #FFFFFF;
						margin-right: -42upx;
						z-index: 9;
						overflow: hidden;
					}
					.name-lable{
						width: 173rpx;
						height: 56rpx;
						padding-left: 54upx;
						// background: linear-gradient(90deg, #EB564F 0%, #7C2C78 100%);
						background: url('../../static/appointment/leftBg.png') no-repeat center /100% 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 56rpx;
						@include ellipsis(1);
					}
				}
				.vs-box{
					.vs-icon{
						width: 112upx;
						height: 112upx;
					}
					.vs-status{
						width: 108rpx;
						height: 40rpx;
						line-height: 40upx;
						text-align: center;
						background: #772622;
						border-radius: 22rpx 22rpx 22rpx 22rpx;
						border: 2rpx solid #EB564F;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: -25upx;
					}
					.grey{
						color: #5250AA;
						background: #19185E;
						border: 2rpx solid #5250AA;
					}
					.green{
						background: #1C573B;
						border: 2rpx solid #53A33A;
					}
					.blue{
						background: #2263AC;
						border: 2rpx solid #0AD2E6;
					}
				}
				.right-box{
					.head-box{
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
						border: 2rpx solid #FFFFFF;
						margin-left: -42upx;
						z-index: 9;
						overflow: hidden;
					}
					.name-lable{
						width: 173rpx;
						height: 56rpx;
						padding-right: 54upx;
						// background: linear-gradient(265deg, #5BB9F7 0%, #4140B5 100%);
						background: url('../../static/appointment/rightBg.png') no-repeat center /100% 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 56rpx;
						text-align: right;
						@include ellipsis(1);
					}
				}
			}
			.bottom-box{
				margin-top: 4upx;
				padding: 38upx 28upx;
				background: #1A195F;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				position: relative;
				.appointment-btn{
					width: 168rpx;
					height: 68rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #26BCFD;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #26BCFD;
					line-height: 68rpx;
					text-align: center;
					position: absolute;
					bottom:20%;
					margin: auto;
					right: 28upx;
				}
				.shop-info-box{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #6E6E9A;
					line-height: 36rpx;
					flex: none;
					.address-icon{
						width: 30upx;
						height: 36upx;
						margin-right: 22upx;
						flex: none;
					}
					.distance-lable{
						height: 44rpx;
						line-height: 44rpx;
						padding: 0 18upx;
						background: #312F80;
						border-radius: 22rpx 22rpx 22rpx 22rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #8F8EBA;
						display: inline-block;
						margin-left: 12upx;
						flex: none;
					}
				}
				.time-box{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #6E6E9A;
					line-height: 36rpx;
					margin-top: 12upx;
					.time-icon{
						width: 32upx;
						height: 32upx;
						margin-right: 20upx;
					}
				}
				.chat-box{
					margin-top: 20upx;
					align-items: start;
					.chat-icon{
						width: 40upx;
						height: 40upx;
						flex: none;
					}
					.chat-info{
						margin-left: 12upx;
						.chat-text{
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 36rpx;
							margin-bottom: 16upx;
						}
						.lable-box{
							flex-wrap: wrap;
							.lable-item{
								height: 44rpx;
								border-radius: 26rpx 26rpx 26rpx 26rpx;
								border: 2rpx solid #8C8CAF;
								padding: 0 20upx;
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #8C8CAF;
								line-height: 44rpx;
								margin-right: 12upx;
								margin-bottom: 20upx;
							}
						}
					}
				}
				.btn-box{
					border-top: 2rpx solid #312F80;
					margin-top: 34upx;
					padding-top: 32upx;
					justify-content: flex-end;
					.btn{
						width: 194rpx;
						height: 68rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 2rpx solid #26BCFD;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #26BCFD;
						line-height: 68rpx;
						text-align: center;
						margin-left: 24upx;
						&:nth-of-type(1){
							margin-left: 0;
						}
						.edit-icon{
							width: 26upx;
							height: 26upx;
							margin-right: 12upx;
						}
						.share-icon{
							width: 26upx;
							height: 24upx;
							margin-right: 12upx;
						}
					}
					.solid{
						background: #26BCFD;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 2rpx solid #26BCFD;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						justify-content: center;
					}
				}
			}
		}
	}
	.make-btn{
		width: 190rpx;
		height: 147rpx;
		line-height: 38rpx;
		text-align: center;
		justify-content: center;
		background: url('../../static/appointment/make-img.png') no-repeat center/100% 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		padding-bottom: 42rpx;
		position: fixed;
		right: 32upx;
		bottom: 56upx;
		z-index: 9;
	}
</style>
